<%--
  Created by IntelliJ IDEA.
  User: libo
  Date: 2025/6/23
  Time: 09:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>智慧农业管理系统 - 登录与注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #334155;
        }

        .container {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            width: 380px;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #4caf50, #81c784);
        }

        .logo {
            text-align: center;
            margin-bottom: 25px;
        }

        .logo h1 {
            font-size: 24px;
            color: #2e7d32;
            font-weight: 600;
        }

        .logo p {
            font-size: 14px;
            color: #6b7280;
            margin-top: 5px;
        }

        .tabs {
            display: flex;
            margin-bottom: 25px;
            border-bottom: 1px solid #e5e7eb;
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 16px;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .tab.active {
            color: #2e7d32;
            font-weight: 500;
        }

        .tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 20%;
            width: 60%;
            height: 2px;
            background-color: #4caf50;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #374151;
            font-weight: 500;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #4caf50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .captcha-group {
            display: flex;
            align-items: center;
        }

        .captcha-input {
            flex: 1;
            margin-right: 10px;
        }

        .captcha-image {
            width: 100px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #d1d5db;
        }

        .error-message {
            color: #ef4444;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        .success-message {
            color: #10b981;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        .btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 5px;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        }

        .btn:active {
            transform: translateY(0);
        }

        .particles {
            position: fixed;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0;
            animation: float 8s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
            10%, 90% { opacity: 0.5; }
            50% { transform: translateY(-100px) rotate(180deg); opacity: 0.5; }
        }
    </style>
</head>
<body>
<div class="particles" id="particles"></div>

<div class="container">
    <div class="logo">
        <h1>智慧农业管理系统</h1>
        <p>精准农业，绿色未来</p>
    </div>

    <div class="tabs">
        <div class="tab active" id="tab">登录</div>
        <div class="tab" id="register-tab">注册</div>
    </div>

    <!-- 登录表单 -->
    <div class="tab-content active" id="content">
        <form id="form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
            </div>

            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
            </div>

            <div class="form-group">
                <label for="login-captcha">验证码</label>
                <div class="captcha-group">
                    <input type="text" id="login-captcha" name="captcha" class="captcha-input" required>
                    <img id="login-captcha-image" class="captcha-image" alt="验证码" title="点击刷新">
                </div>
            </div>

            <div class="error-message" id="error"></div>

            <button type="submit" class="btn">登录</button>
        </form>
    </div>

    <!-- 注册表单 -->
    <div class="tab-content" id="register-content">
        <form id="register-form">
            <div class="form-group">
                <label for="register-username">用户名</label>
                <input type="text" id="register-username" name="loginAccount" required>
            </div>

            <div class="form-group">
                <label for="register-password">密码</label>
                <input type="password" id="register-password" name="loginPwd" required>
            </div>

            <div class="form-group">
                <label for="register-confirm-password">确认密码</label>
                <input type="password" id="register-confirm-password" name="confirmPassword" required>
            </div>

            <!-- 移除真实姓名字段，默认使用登录账号作为显示名称 -->

            <div class="form-group">
                <label for="register-captcha">验证码</label>
                <div class="captcha-group">
                    <input type="text" id="register-captcha" name="captcha" class="captcha-input" required>
                    <img id="register-captcha-image" class="captcha-image" alt="验证码" title="点击刷新">
                </div>
            </div>

            <div class="error-message" id="register-error"></div>
            <div class="success-message" id="register-success"></div>

            <button type="submit" class="btn">注册</button>
        </form>
    </div>
</div>

<script>
    // 创建背景粒子效果
    function createParticles() {
        const particles = document.getElementById('particles');
        const colors = ['#81c784', '#a5d6a7', '#c8e6c9', '#4caf50', '#66bb6a', '#9ccc65'];

        for (let i = 0; i < 50; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');

            // 随机大小、位置、颜色和动画延迟
            const size = Math.random() * 8 + 2;
            const x = Math.random() * 100;
            const y = Math.random() * 100;
            const color = colors[Math.floor(Math.random() * colors.length)];
            const delay = Math.random() * 10;
            const duration = Math.random() * 15 + 10;

            particle.style.width = `${size}px`;
            particle.style.height = `${size}px`;
            particle.style.backgroundColor = color;
            particle.style.left = `${x}vw`;
            particle.style.top = `${y}vh`;
            particle.style.animationDelay = `${delay}s`;
            particle.style.animationDuration = `${duration}s`;

            particles.appendChild(particle);
        }
    }

    // 页面加载完成后创建粒子
    window.addEventListener('load', createParticles);
    
    // 页面加载完成后检查是否有错误信息
    window.addEventListener('load', function() {
        const errorMsg = document.getElementById('error');
        if(errorMsg && errorMsg.textContent.trim() !== '') {
            errorMsg.style.display = 'block';
        }
    });

    // Tab切换
    document.getElementById('tab').addEventListener('click', function() {
        document.getElementById('tab').classList.add('active');
        document.getElementById('register-tab').classList.remove('active');
        document.getElementById('content').classList.add('active');
        document.getElementById('register-content').classList.remove('active');
        refreshCaptcha('login');
    });

    document.getElementById('register-tab').addEventListener('click', function() {
        document.getElementById('register-tab').classList.add('active');
        document.getElementById('tab').classList.remove('active');
        document.getElementById('register-content').classList.add('active');
        document.getElementById('content').classList.remove('active');
        refreshCaptcha('register');
    });

    // 刷新验证码
    function refreshCaptcha(type) {
        const captchaImage = document.getElementById(type + '-captcha-image');
        captchaImage.src = 'captcha?' + new Date().getTime();
    }

    // 点击验证码图片刷新
    document.getElementById('login-captcha-image').addEventListener('click', function() {
        refreshCaptcha('login');
    });

    document.getElementById('register-captcha-image').addEventListener('click', function() {
        refreshCaptcha('register');
    });

    // 初始化验证码
    refreshCaptcha('login');

    // 登录表单提交
    document.getElementById('form').addEventListener('submit', function(e) {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const captcha = document.getElementById('login-captcha').value;
        const errorMsg = document.getElementById('error');

        // 清除之前的错误消息
        errorMsg.style.display = 'none';

        // 表单验证
        if (!username || !password || !captcha) {
            errorMsg.textContent = '请填写所有必填字段';
            errorMsg.style.display = 'block';
            return;
        }

        // 提交表单
        const formData = new URLSearchParams();
        formData.append('username', username);
        formData.append('password', password);
        formData.append('captcha', captcha);

        fetch('login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: formData,
            credentials: 'same-origin' // 确保发送cookies
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 登录成功，跳转到主页
                window.location.href = data.redirectUrl;
            } else {
                // 登录失败，显示错误信息
                errorMsg.textContent = data.message;
                errorMsg.style.display = 'block';
                refreshCaptcha('login');
            }
        })
        .catch(error => {
            errorMsg.textContent = '登录失败，请稍后再试';
            errorMsg.style.display = 'block';
            refreshCaptcha('login');
        });
    });

    // 注册表单提交
    document.getElementById('register-form').addEventListener('submit', function(e) {
        e.preventDefault();

        const username = document.getElementById('register-username').value;
        const password = document.getElementById('register-password').value;
        const confirmPassword = document.getElementById('register-confirm-password').value;
        const captcha = document.getElementById('register-captcha').value;
        const errorMsg = document.getElementById('register-error');
        const successMsg = document.getElementById('register-success');

        // 清除之前的消息
        errorMsg.style.display = 'none';
        successMsg.style.display = 'none';

        // 表单验证
        if (!username || !password || !captcha) {
            errorMsg.textContent = '请填写所有必填字段';
            errorMsg.style.display = 'block';
            return;
        }

        if (password !== confirmPassword) {
            errorMsg.textContent = '两次输入的密码不一致';
            errorMsg.style.display = 'block';
            return;
        }

        if (password.length < 6) {
            errorMsg.textContent = '密码长度不能少于6位';
            errorMsg.style.display = 'block';
            return;
        }

        // 提交表单
        const formData = new URLSearchParams();
        formData.append('actionType', 'register');
        formData.append('loginAccount', username);
        formData.append('loginPwd', password);
        formData.append('captcha', captcha);

        fetch('userServlet', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: formData.toString()
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                successMsg.textContent = data.message;
                successMsg.style.display = 'block';

                // 2秒后切换到登录页
                setTimeout(function() {
                    document.getElementById('tab').click();
                }, 2000);
            } else {
                errorMsg.textContent = data.message;
                errorMsg.style.display = 'block';
                refreshCaptcha('register');
            }
        })
        .catch(error => {
            errorMsg.textContent = '注册失败，请稍后再试';
            errorMsg.style.display = 'block';
            refreshCaptcha('register');
        });
    });
</script>
</body>
</html>